{% load full_time %}
{% load random_num %}
<!DOCTYPE html>
<html>
    <head lang="zh-CN">
        <meta charset="UTF-8">
        <title>{{ web_config.web_title }}</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="{{ web_config.web_desc }}" />
        <meta name="keywords" content="{{ web_config.web_keyword }}" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="bookmark" href="/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="/static/app/master.css"/>
        <link rel="stylesheet" href="/static/acm_contest/2016NEW/index.css" />
        <script type="text/javascript" src="/static/library/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/static/library/wejudge.grestp.js"></script>
        <script type="text/javascript" src="/static/library/wejudge.modalbox.js"></script>
        <script type="text/javascript" src="/static/library/wejudge.js?1.0.3"></script>
        <script type="text/javascript" src="/static/library/jquery.scrollTo.min.js"></script>
{#        <script type="text/javascript" src="/static/acm_contest/2016NEW/index.js"></script>#}
        <!--[if lt IE 9]>
        <script type="text/javascript" src="/static/library/fuckie.js"></script>
        <![endif]-->
        <style type="text/css">
        html,body {height:100%;}
        .page_body{
            padding-bottom: 0;
        }
        .logo_panel{
            height: 300px;
            position: relative;
            top:15%;
        }
        .screen_blue{
            background-color: #3498db;
            background-image: linear-gradient(45deg, #2980b9, #3498db);
        }
        .screen_gray{
            background-color: #2c3e50;
            background-image: linear-gradient(45deg, #2c3e50, #34495e);
        }

        #carousel_panel_index{
            padding-top: 50px;
            height:100%;
            background-image: url(/static/bgimgs/{{ 1|random_num:3 }}.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .screen_1{
            padding-top: 50px;
            width: 100%;
            height: 100%;

        }
        #carousel, .carousel-inner{
            height: 100%;
        }
        .screen_2{
            min-height:360px;
        }
        .screen_3{
            min-height:500px;
            color: #fff;
        }
        .screen_3 small{
            color: #fff;
        }
        .screen_3 .col-sm-6{
            min-height: 500px;
            padding: 40px;
            line-height:50px;
        }
        .screen_5 img{
            border: 1px solid #ccc;
        }
        .screen_7 a{
            color: #fff;
        }
        .screen_7{
            min-height: 140px;
            color: #fff;
        }
        .screen_title_panel {
            text-align: center;
            padding: 40px;
        }
        .carousel_panel {
            height:100%;
        }
        @keyframes nav_button_hover{
            from {
                background: transparent;
                color: #fff;
            }
            to {
                background: #fff;
                color: #000;
            }
        }
        @keyframes nav_button_acm_hover{
            from {
                background: transparent;
                color: #F0AD4E;
            }
            to {
                background: #F0AD4E;
                color: #fff;
            }
        }
        .nav_button {
            width: 200px;
            height:42px;
            line-height:38px;
            border: 1px solid #fff;
            border-radius: 5px;
            color: #fff;
            background: transparent;
            font-size: 1.5em;
            outline: none;
        }
        .nav_button:hover{
            background: #fff;
            color: #000;
            animation: nav_button_hover 1s ease-in-out;
        }

        .bucket{
            color:#677093;
            text-align: center;
        }
        .bucket .glyphicon{
            color:#92C6FF;
        }
        #carousel-screen .carousel-caption{
            bottom: -70px;
        }
        #carousel-screen{
            width: auto;
            max-width: 446px;
        }
        #carousel-screen .carousel-inner .item{
            width: auto;
            max-width: 446px;
        }
        </style>
        <script type="text/javascript">
            $(function () {
                $("#acm_code").typewriter();
                $("#acm_code").show();
            });
        </script>
    </head>
    <body>
        {% include 'navbar.html' %}
        <section class="screen_1">
            <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
                <ol class="carousel-indicators">
                    <li data-target="#carousel" data-slide-to="0" class="active"></li>
{#                    <li data-target="#carousel" data-slide-to="1"></li>#}
                </ol>
                <div class="carousel-inner" role="listbox">
{#                    <div id="carousel_panel_acm" class="carousel_panel item active" align="center">#}
{#                        <audio src="/static/acm_contest/2016NEW/bg.mp3" autoplay></audio>#}
{#                        <div id="acm_contest_title" class="h1"><br />2016年ACM新生赛<br /><small style="color: #ccc;">北京师范大学珠海分校·信息技术学院</small></div>#}
{#                        <br />#}
{#                        <button class="nav_button" onclick="window.open('http://acm.bnuz.edu.cn/company/5');">马上报名</button>#}
{#                        <br /><br /><br />#}
{#                        <div id="acm_code" style="display: none;">#}
{#    <span class="macro">#include</span> <span class="string">&lt;bnuz.h&gt;</span><br />#}
{#    <span class="macro">#include</span> <span class="string">&lt;acmicpc.h&gt;</span><br />#}
{#    <span class="macro">#include</span> <span class="string">&lt;stdio.h&gt;</span><br />#}
{#    <span class="macro">#define</span> <span class="identifier2">GANBADIE</span> <span class="number">3</span><br />#}
{#    <span class="keyword">int</span> <span class="identifier">main</span>()<br />#}
{#    {<br />#}
{#    <span class="space"></span><span class="identifier">printf </span>(<span class="string">"大家好，一年一届的北京师范大学珠海分校ACM-ICPC新生赛开始报名了。\n"</span>);<br />#}
{#    <span class="space"></span><span class="identifier">printf </span>(<span class="string">"你想"</span>);<br />#}
{#    <span class="space"></span>if (<span class="identifier">printf</span>(<span class="string">"加入ACM协会吗？\n"</span>) || <span class="identifier">printf</span>(<span class="string">"成为编程达人吗？\n"</span>))<br />#}
{#    <span class="space"></span>{<br />#}
{#    <span class="space"></span><span class="space"></span><span class="identifier">printf</span>(<span class="string">"来参加新生赛吧！\n"</span>);<br />#}
{#    <span class="space"></span><span class="space"></span>if (<span class="identifier">printf</span>(<span class="string">"让我们看到你出众的实力\n"</span>))<br />#}
{#    <span class="space"></span><span class="space"></span>{<br />#}
{#    <span class="space"></span><span class="space"></span><span class="space"></span><span class="identifier">printf</span>(<span class="string">"没有学过ACM你都不知道你自己有多菜，若没有拿过气球，你还敢说你是程序员？\n"</span>);<br />#}
{#    <span class="space"></span><span class="space"></span><span class="space"></span><span class="keyword">for</span> (<span class="keyword">int</span> <span class="identifier2">i</span> = <span class="number">0</span>; i &lt; <span class="identifier2">GANBADIE</span>; ++<span class="identifier2">i</span>)<br />#}
{#    <span class="space"></span><span class="space"></span><span class="space"></span><span class="space"></span><span class="identifier">printf</span>(<span class="string">"我要成为北师最腻害的程序员！\n"</span>);<br />#}
{#    <span class="space"></span><span class="space"></span>}<br />#}
{#    <span class="space"></span><span class="space"></span><span class="identifier">printf</span>(<span class="string">"千万不要错过每一次展示自己的机会。"</span>);<br />#}
{#    <span class="space"></span>}<br />#}
{#    <span class="space"></span><span class="keyword">return</span> <span class="number">0</span>;<br />#}
{#    }#}
{#                        </div>#}
{##}
{#                    </div>#}
                    <div id="carousel_panel_index" class="carousel_panel item active" align="center">
                        <div class="logo_panel">
                            <br>
                            <img src="/static/images/logo_flat.png" style="max-height: 80px; height:80px;"><br />
                            <span style="font-size: 1.2em; font-weight: 500; letter-spacing: 0.5em; line-height: 3.2em; color: #fff;">在线代码评测教学辅助系统</span><br />
                            {% if not user_session.logined %}
                            <br /><button class="nav_button" onclick="window.location.href='{% url 'account_login' %}'">登录</button><br />
                            {% endif %}
                            <button class="nav_button" style="border:0; margin-top: 10%;" onclick="$(document).scrollTo('.screen_2', 1000)">下拉查看更多</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="screen_2">
            <div class="screen_title_panel"><h1>功能特性</h1></div>
            <div class="container">
                <div class="row">
                    <div class="col-sm-3 bucket">
                        <h1><span class="glyphicon glyphicon-th-list"></span></h1>
                        <h4>题库</h4>
                        <h5>更加适合新手学习的题目</h5>
                    </div>
                    <div class="col-sm-3 bucket">
                        <h1><span class="glyphicon glyphicon-list-alt"></span></h1>
                        <h4>作业</h4>
                        <h5>强大的在线作业功能</h5>
                    </div>
                    <div class="col-sm-3 bucket">
                        <h1><span class="glyphicon glyphicon-fire"></span></h1>
                        <h4>比赛</h4>
                        <h5>即使是比赛，也能轻松应对，准确评判</h5>
                    </div>
                    <div class="col-sm-3 bucket">
                        <h1><span class="glyphicon glyphicon-globe"></span></h1>
                        <h4>开源</h4>
                        <h5>GPL协议，自由使用</h5>
                    </div>
                </div>
            </div>
        </section>
        <section class="screen_3 screen_blue">
            <div class="row" style="margin: 0 10%;">
                <div class="col-sm-6">
                    <br />
                    <div id="carousel-screen" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-screen" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-screen" data-slide-to="1"></li>
                            <li data-target="#carousel-screen" data-slide-to="2"></li>
                            <li data-target="#carousel-screen" data-slide-to="3"></li>
                            <li data-target="#carousel-screen" data-slide-to="4"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox" style="height:360px;">
                            <div class="item active" align="center">
                                <img src="/static/images/screen/shot1.jpg" style="height: 240px;">
                                <div class="carousel-caption">
                                题库系统
                                </div>
                            </div>
                            <div class="item" align="center">
                                <img src="/static/images/screen/shot2.jpg" style="height: 240px;">
                                <div class="carousel-caption">
                                判题系统
                                </div>
                            </div>
                            <div class="item" align="center">
                                <img src="/static/images/screen/shot3.jpg"  style="height: 240px;">
                                <div class="carousel-caption">
                                作业系统
                                </div>
                            </div>
                            <div class="item" align="center">
                                <img src="/static/images/screen/shot4.jpg" style="height: 240px;">
                                <div class="carousel-caption">
                                教学管理
                                </div>
                            </div>
                            <div class="item" align="center">
                                <img src="/static/images/screen/shot5.jpg" style="height: 240px;">
                                <div class="carousel-caption">
                                作业统计分析
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6" align="right">
                    <h2><small>WeJudg项目启动于</small> 2015年5月</h2>
                    <h2>2016年9月 <small>正式上线运行</small></h2>
                    <h1><small>截至目前，我们共有题目</small> {{ problem_counter }} <small>个</small></h1>
                    <h1>{{ status_counter }} <small>次代码的提交与评测</small></h1>
                    <h1><small>以及</small> {{ user_counter }} <small>位用户的使用</small></h1>
                    <h1>感谢有你!</h1>
                </div>
            </div>
        </section>
        <section class="screen_7 screen_gray">
            <div style="padding:2% 10% 0 10%;">
                <div class="row">
                    <div class="col-sm-3">
                        <h4>帮助中心</h4>
                        <h5><a href="{% url 'helper_index' %}">常见问题</a></h5>
                        <h5><a href="{% url 'helper_guide_student' %}">学生使用演示</a></h5>
                    </div>
                    <div class="col-sm-3">
                        <h4>项目介绍</h4>
                        <h5>WeJudge是一个基于Python语言开发的OJ系统，用于辅助程序设计课程教学。</h5>
                    </div>
                    <div class="col-sm-3">
                        <h4>联系我们</h4>
                        <h5>如有问题请发邮件到<br />webmaster@wejudge.net</h5>
                    </div>
                    <div class="col-sm-3">
                        <h4>关于</h4>
                        <h5>
                            &copy; 2015-2016 WeJudge <br />
                            <a href="https://www.lanrongqi.com/wejudge-whats-new/" style="text-decoration: underline;">Ver.{{ web_config.web_version }}</a>&nbsp;
                            (by LanceLRQ)
                            <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260546745'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/stat.php%3Fid%3D1260546745%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
                        </h5>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>